<!--
  @desc: 审批同意
  @author: liuyun
-->
<template>
  <!-- 审批操作 -->
  <div class="selector-mask">
    <div class="selector-wrapper">
      <div class="selector-head">
        <span class="selector-close">X</span>
        <p class="selector-title">审批操作</p>
      </div>
      <ul class="selector-list">
        <li class="selector-item">同意</li>
        <li class="selector-item">不同意</li>
        <li class="selector-item">转他人审批</li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang='stylus' scoped>
.selector-mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  z-index: 99;
  .selector-wrapper{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 4px 4px;
    overflow: hidden;
    .selector-head{
      width:100%;
      height:60px;
      background: #f4f4f4;
      position: relative ;
      .selector-close{
        position: absolute;
        top: 23px;
        left: 16px;
      }
      .selector-title{
        font-size: 20px;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
    }
    .selector-list{
      background: #fff;
      max-height: 300px;
      .selector-item{
        margin: 0 20px;
        padding: 15px 0;
        text-align: center;
        font-size: 16px;
        color: #666;
      }
    }
  }
}
</style>
